<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <script type="text/javascript" src="../../frontJS/html5shiv.js"></script>
    <script type="text/javascript" src = "../../frontJS/json2.js"></script>
    <!--[if lt IE 9]>
  <script src="http://apps.bdimg.com/libs/html5shiv/3.7/html5shiv.min.js"></script>
  <script src="http://apps.bdimg.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<style type="text/css">
[ng-cloak] {
    display: none;
}
</style>


<!-- <script src=”http://ie7-js.googlecode.com/svn/version/2.1(beta4)/IE9.js”></script> -->
<body id="App" ng-controller="indexCtrl" novalidate ng-cloak>
    <div >
        名:
        <input type="text" ng-model="firstName">
        <br> 姓:
        <input type="text" ng-model="lastName">
        <br>
        <br> 姓名: {{firstName + " " + lastName}}
        <!--         <div ng-init="quantity=1;cost=5">
            <p>总价： <span ng-bind="quantity * cost"></span></p>
        </div> -->
        <!-- <div ng-app="" ng-init="person={firstName:'John',lastName:'Doe'}"> -->
            <p>姓为 {{ person.lastName }}</p>
        <!-- </div> -->
        <ol class="breadcrumb">
            Angular数组
        </ol>
        <div ng-app="" ng-init="points=[1,15,19,2,40]">
            <p>第三个值为 {{ points[2] }}</p>
        </div>
        <div ng-app="" ng-init="quantity=1;price=5">
            <h2>价格计算器</h2> 数量：
            <input type="number" ng-model="quantity"> 价格：
            <input type="number" ng-model="price">
            <p><b>总价：</b> {{ quantity * price | currency}}</p>
        </div>
        <div ng-app="" ng-init="names=['Jani','Hege','Kai']">
            <p>使用 ng-repeat 来循环数组</p>
            <ul>
                <li ng-repeat="x in names  ">
                    {{ x }}
                </li>
            </ul>
        </div>
        <p>姓名为 {{ lastName | uppercase }}</p>
        <p>姓名为 {{ lastName | lowercase }}</p>
        {{1490161945000 | date:"yyyy-MM-dd HH:mm:ss"}}</p>
        <p>{{149016.1945000 | number:2}}</p>
        {{ 250 | currency }}</p>
        <p>{{ 250 | currency:"RMB ￥ " }}</p>
        <p>输入过滤:</p>
        <p>
            <input type="text" ng-model="test">
        </p>
        <ul>
            <li ng-repeat="x in nameData | filter:test | orderBy:'country'">
                {{ (x.name | uppercase) + ', ' + x.country }}
            </li>
        </ul>
        <ol class="breadcrumb">
            根id降序排
        </ol>
        {{ [{"age": 20,"id": 10,"name": "iphone"}, {"age": 12,"id": 11,"name": "sunm xing"}, {"age": 44,"id": 12,"name": "test abc"} ] | orderBy:'id':true }} {{ [{"age": 20,"id": 10,"name": "iphone"},
        <ol class="breadcrumb">
            根id降序排
        </ol>
        {"age": 12,"id": 11,"name": "sunm xing"}, {"age": 44,"id": 12,"name": "test abc"} ] | orderBy:'id' }}
        <ol class="breadcrumb">
            orderBy 过滤器根据表达式排列数组 默认正序asc,倒序添加-负号
        </ol>
        <div class="" ng-repeat="v in city | orderBy:'id'">
            <p ng-bind="v.name"></p>
        </div>
        <div class="" ng-repeat="v in city | orderBy:'-id' | filter : ''">
            <p ng-bind="v.name" style="color:red;"></p>
        </div>
        <ol class="breadcrumb">
            自定义过滤器
        </ol>
        <p>姓名: {{ firstName | reverse }} {{myWelcome}}</p>
        <p>{{firstName | limitCharacter : 3}}</p>
        <ol class="breadcrumb">
            $timeout定时器
        </ol>
        <button ng-click="onTimeout()">执行</button>
        <p>{{myHeader}}</p>
        <ol class="breadcrumb">
            $http接口调用
        </ol>
        <select class="form-control" ng-model="addressSelected" ng-options="o for o in addressList">
            <option value="">-- 请选择 --</option>
        </select>
        <div ng-repeat='x in weatherinfo'>
            <ul>
                <li>{{x.citynm}} {{x.days}} {{x.week}} {{x.temperature}} {{x.weather}} {{x.wind}} {{x.winp}}</li>
            </ul>
        </div>
        <ol class="breadcrumb">
            下拉选择
        </ol>
        <p>选项，{{selected}}</p>
        <select class="form-control" ng-model="selected" ng-options="o.ProductName for o in optData">
            <option value="">-- 请选择 --</option>
        </select>
     <!--    <select ng-model="myColor" ng-options="color.name for color in colors"></select> -->
        <select class="form-control" ng-model="myColor" ng-options="color.name group by color.shade for color in colors"></select>
  <!--       <input type="file" name="file1" ng-model="chk1" id="file1" onchange="angular.element(this).scope().change('pic1','file1')">
        <img src="images/px.gif" id="pic1" style="max-width:300px;max-height:300px;margin:0 auto;display:block;"> -->
        <p>输入一个数字:
            <input type="number" ng-change="square()" ng-model="number" />
        </p>
        <button ng-click="square()">X<sup>2</sup></button>
        <p>结果: {{result}}</p>
    </div>
</body>


<link rel="stylesheet" type="text/css" href="../../frontStyle/bootstrap.min.css">
<script type="text/javascript" src="../../frontJS/require/require.js" data-main="../../frontJS/main"></script>


</html>